/*
容器组件 
左右连接,建立联系
*/

// 引入Count的UI组件
import CountUI from '../../componets/Count'
// 引入action
import { createIncrementAction, createDiscrementAction, createIncrementAsyncAction } from '../../redux/count_action'
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

// 1、mapStateToProps函数返回的是一个对象,
// 2、返回的对象中的key就作为传递给UI组件props的key,value就作为传递UI组件props的value 
// 3、mapStateToProps用于传递状态
function mapStateToProps(state) {
    return { count: state }
}

// 1、mapDispatchToProps函数返回的是一个对象,
// 2、返回的对象中的key就作为传递给UI组件props的key,value就作为传递UI组件props的value 
// 3、mapDispatchToProps用于传递操作状态的方法
function mapDispatchToProps(dispatch) {
    return {
        jia: (number) => {
            //通知redux执行加法 
            dispatch(createIncrementAction(number))
        },
        jian: (number) => {
            //通知redux执行减法 
            dispatch(createDiscrementAction(number))
        },
        jiaAsync: (number, time) => {
            //通知redux执行减法 
            dispatch(createIncrementAsyncAction(number, time))
        },
    }
}

// 创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)












